<template>
	<view class="first-login-dialog-componet">
		<Modal :show="show" @onClose="close" :clickMaskClose="true" :modalStyle="topAddSpace">
			<view class="main">
				<view class="receive">
					<view class="completeContent">{{ props.data?.completeContent}}</view>
					<view  class="title"><view class="before-round"></view> {{ props?.data.popupName }} <view class="after-round"></view></view>
					<view  class="worth">价值<view class="num"> {{props.data?.worth}} </view>元</view>
					<view class="integral">
						<view  class="day">{{ props.data?.first }}</view>
					</view>
					<view class="receive_btn" @click="onToPage"></view>
				</view>
			</view>
			<slot slot="close">
				<view class="close-icon" @click="close" :style="customCloseStyle"></view>
			</slot>
		</Modal>
	</view>
</template>

<script setup lang="ts">
	import { computed, ref, watch } from 'vue'
	import Modal from '@/components/modal/index.vue'
		
	interface ReceiveProps {  
		visible: boolean;  
		data: {
			completeContent: string;
			popupName: string;  
			worth: string | number;  
			first: string;  
		},
		className: string | undefined | null
	}  

	const props = withDefaults(defineProps<() => ReceiveProps>(),  {  
		visible: false,  
		data: {
			completeContent: '',
			popupName: '',  
			worth: '',
			first: '', 
		}
	});
	const isCurrentPage = (route = '') => {
		// const pathArr = route.split("/")
		// console.log('pathArr', pathArr)
		// const pagePath = pathArr[pathArr.length - 2]
		const pages = getCurrentPages();
		// console.log('pages', pages)
		const currentPage = pages[pages.length - 1];
		console.log('currentPage', currentPage, route)
		return currentPage?.$page.fullPath === route
		// return currentPage.route.includes(pagePath)
	}
	
	// 有的页面顶部是自定义的，那么弹窗就会往上，需要顶部加一个距离
	const isCustomPage = () => {
		const customPagesFullPath = ['/pagesD/jackpot/index'];
		return customPagesFullPath.some(path => isCurrentPage(path))
	}
	
	const isCustomNavigator = ref(isCustomPage())
	
	const topAddSpace = ref({
		top: '0'
	})
	const customCloseStyle = ref({bottom: '100rpx'});

	watch(isCustomNavigator, (newVal, oldVal) => {
		console.log('是否会进入监听', newVal, oldVal)
			if(newVal){
				topAddSpace.value = {
					top: '175rpx'
				}
				customCloseStyle.value = {
					bottom: '275rpx'
				}
			} else {
				topAddSpace.value = {
					top: '0'
				}
				customCloseStyle.value = {
					bottom: '100rpx'
				}
			}
	}, {immediate: true})
	
	
	// const topAddSpace = computed(() => {
	// 	let customStyle: any  = { top: '175rpx' };
	// 	if(isCustomPage()){
	// 		customStyle.top = '175rpx';
	// 	}
	// 	return customStyle;
	// })
	
	
	// const customCloseStyle = computed(() => {
	// 	let customStyle: any  = {};
	// 	if(isCustomPage()){
	// 		customStyle.bottom = '275rpx';
	// 	}
	// 	return customStyle;
	// })
	
	// onShow(() => {
	// 	console.log("进入onshow", isCustomPage())
	// 	topAddSpace.value = {
	// 		top: isCustomPage() ? '175rpx' : '0'
	// 	}
	// 	if(isCustomPage()){
	// 		customCloseStyle.value = {
	// 			bottom: '275rpx'
	// 		}
	// 	}
	// })
	

	
	console.log("接受的值", props, props.visible)
	
	const emit = defineEmits(['close', 'onDestroy', 'jump'])
	const show = computed(() => props.visible)

	const close = () => {
		emit('close')
		emit('onDestroy')
	}
	const onToPage = () => {
		emit("jump")
		close()
	}

	
</script>

<style scoped lang="scss">
	.first-login-dialog-componet{
			
	}
	
	.close{
		font-size: 50upx;
		    position: fixed;
		    top: 500px;
		    z-index: 3000;
	}
	
	
	.close-icon{
		position: absolute;
		bottom: 100upx;
		width:68upx;
		height: 68upx;
		background:url("/static/images/global-notice/close.png") 0 0 no-repeat;
		background-size: cover;
	}
	
	.main{
		position: absolute;
		width: 100%;
		top: 150upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.receive{
			width:660upx;
			height:922upx;
			background: url("/static/images/global-notice/receive_bg_small.png") 0 0 no-repeat;
			background-size: cover;
			position: relative;
			.receive_btn{
				width:582upx;
				height:130upx;
				background: url("/static/images/global-notice/receive_btn_small.png") 0 0 no-repeat;
				background-size: cover;
				position: absolute;
				margin: 0 auto;
				bottom: 150upx;
				left: 30upx;
				right: 0;
			}
			.completeContent{
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 32upx;
				line-height: 46upx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				color:#fff;						
			}
			
			.title{
				position: absolute;
				left: 0;
				right: 0;
				top: 13%;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32upx;
				color: #AC4B31;
				text-align: center;
				font-style: normal;
				text-transform: none;
				display: flex;
				align-items: center;
				justify-content: center;	
				.before-round{
					display: block;
					width: 8upx;
					height: 8upx;
					border-radius: 50%;
					margin-right: 10upx;
					overflow: hidden;
					background-color: #AC4B31;
				}
				.after-round{
					display: block;
					width: 8upx;
					height: 8upx;
					border-radius: 50%;
					margin-left: 10upx;
					overflow: hidden;
					background-color: #AC4B31;
				}
			}
			.worth{
				position: absolute;
				left: 0;
				right: 0;
				top: 20%;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 36upx;
				color: #FC412F;
				text-align: center;
				font-style: normal;
				text-transform: none;
				display: flex;
				justify-content: center;
				align-items: baseline;
				.num{
					font-family: DIN Pro, DIN Pro;
					font-weight: bold;
					font-size: 88upx;
					color: #FC412F;
					// text-shadow: inset 0upx 4upx 2upx #E80908;
					text-align: center;
					font-style: normal;
					text-transform: none;
					margin: 0 20upx;
				}
			}
			.integral{
				position: absolute;
				left: 0;
				right: 0;
				top: 35%;
				display: flex;
				justify-content: center;
				align-items: baseline;
				.day{
					width: 266upx;
					height: 52upx;
					line-height: 52upx;
					background: #FED3B2;
					border-radius: 50upx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 550;
					font-size: 24upx;
					color: #FC412F;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}
			}
			
		}
		// .integral{
		// 	font-family: PingFang SC, PingFang SC;
		// 	font-weight: bold;
		// 	font-size: 36upx;
		// 	color: #9E6538;
		// 	text-align: center;
		// 	font-style: normal;
		// 	text-transform: none;
		// 	display: flex;
		// 	align-items: center;
		// 	margin-bottom: 30upx;
		// 	.num{
		// 		color: #DF2626;
		// 	}
		// }
		// .can-tips{
		// 	font-family: PingFang SC, PingFang SC;
		// 	font-weight: bold;
		// 	font-size: 36upx;
		// 	color: #72421D;
		// 	text-align: center;
		// 	font-style: normal;
		// 	text-transform: none;
		// 	margin-bottom: 50upx;
		// }
		// .btn{
		// 	width: 100%;
		// }
	}
</style>

<style lang="scss">
	
	.vant-dialog{
		overflow:visible !important;
	}
</style>